import { AppProps, Container, Events } from "@/components/custom/index.tsx";
import { ColorPicker, Form } from "@arco-design/web-vue";
import SvgIcon from "@/components/Svg/index.vue";
import DraggableVue from "@/components/draggable/index.vue";
import {
  definitionInput,
  definitionSelect,
  definitionSwitch,
  definitionTextarea,
} from "@/components/custom/incident";
import { ref } from "vue";
export default {
  type: "container",
  label: "表单容器",
  description: "表单容器",
  hidden: false,
  isform: false,
  draggable: true,
  icon: () => <SvgIcon name="form"></SvgIcon>,
  preview: () => {
    return <ColorPicker />;
  },
  render: (props: any, element: Container, app: AppProps) => {
    let { children } = element;
    const model = ref({});
    const onChildren = (children: Container[]) => {
      if (props.grid && children) {
        for (let i = 0; i < children.length; i++) {
          const element = children[i];
          element.grid = {
            span: props.grid,
          };
          if (element.isform) {
            model.value[element.formItem.field] = element.props.modelValue;
          }
        }
      }
      return children;
    };
    const isDraggable = () => {
      if (element.draggable == true) {
        return {
          draggable: true,
          style: {
            width: "100%",
            minHeight: "80px",
            background: "#e8e8e8de",
            padding: "8px 0",
          },
        };
      } else {
        return {
          draggable: false,
        };
      }
    };
    const onSubmit = (data) => {
      console.log(data);
    };
    let bant = {
      list: onChildren(children),
      "onUpdate:list": (value) => {
        element.children = value;
      },
      app,
      ...isDraggable(),
    };

    const formConfig = {
      ...props,
      model: model.value,
      rules: [],
      grid: undefined,
    };
    return (
      <>
        <Form {...formConfig} onSubmit={onSubmit}>
          <DraggableVue {...bant} />
        </Form>
      </>
    );
  },
  props: {
    rules: definitionTextarea({
      type: "string",
      label: "表单验证",
      placeholder: "请输入表单验证",
      defaultValue: "",
    }),
    layout: definitionSelect({
      type: "string",
      label: "布局",
      placeholder: "请选择布局",
      options: [
        { label: "水平", value: "horizontal" },
        { label: "垂直", value: "vertical" },
        { label: "内联", value: "inline" },
      ],
      defaultValue: "horizontal",
    }),
    size: definitionSelect({
      type: "string",
      label: "大小",
      placeholder: "请选择大小",
      options: [
        { label: "迷你", value: "mini" },
        { label: "小", value: "small" },
        { label: "中", value: "medium" },
        { label: "大", value: "large" },
      ],
      defaultValue: "medium",
    }),
    grid: definitionSelect({
      type: "number",
      label: "栅格",
      placeholder: "请选择栅格",
      options: [
        { label: "24格", value: 24 },
        { label: "12格", value: 12 },
        { label: "8格", value: 8 },
        { label: "6格", value: 6 },
      ],
      defaultValue: 24,
    }),
    "label-align": definitionSelect({
      type: "string",
      label: "标签对齐",
      placeholder: "请选择标签对齐",
      options: [
        { label: "左对齐", value: "left" },
        { label: "右对齐", value: "right" },
      ],
      defaultValue: "left",
    }),
    disabled: definitionSwitch({
      type: "boolean",
      label: "禁用",
      defaultValue: false,
    }),
    "auto-label-width": definitionSwitch({
      type: "boolean",
      label: "自动标签宽度",
      defaultValue: false,
    }),
  },
  children: [],
  events: {},
} as Container;
